.table {
    width: 100%;
    margin: 10px 0;

    span {
        display: inline-block;
        height: 22px;
        line-height: 22px;
        font-weight: 400;
        border-radius: 2px;
        font-size: 12px;
        padding: 0 10px;
    }

    .state1 {
        color: #a06eff;
        border-color: #a06eff;
        background-color: #f3ebff;
    }

    .state2 {
        color: #00c0c0;
        border-color: #00c0c0;
        background-color: #ebf6f6;
    }

    .state3 {
        color: #007cff;
        border-color: #007cff;
        background-color: #eaeff8;
    }

    .state4 {
        color: #122954;
        border-color: #122954;
        background-color: #eaecee;
    }

    .btns {
        display: flex;
        align-items: center;
        justify-content: center;

        .detail {
            border-color: #007cff;
            background-color: #007cff;
        }
    }
}

.footer {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btns {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn {
            display: inline-block;
            text-align: center;
            height: 30px;
            line-height: 28px;
            padding: 0 10px;
            font-weight: 400;
            font-size: 14px;
            border: 1px solid #e5e5e5;
            border-radius: 2px;
            color: #383838;
            border-color: #dedede;
            background-color: #ffffff;
            cursor: pointer;
        }
    }
}

.footer:hover {
    background-color: #f5f7fa;
}